<script>
import { ElMessage, ElMessageBox } from 'element-plus';
import { useProductApi } from '/@/api/product';
import { isEmpty } from '/@/utils';

const { getSpecificationList } = useProductApi();

export default {
	name: 'SelectSpecification',
	props: {
		modelValue: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			selected: '',
			options: [],
			customValue: '',
			isShowCustomInput: false,
		};
	},
	computed: {
		specificationList: {
			get() {
				return this.modelValue || [];
			},
			set(val) {
				this.$emit('update:modelValue', val);
			},
		},
		btnText() {
			return this.isShowCustomInput ? '选择已有规格' : '新增自定义规格';
		},
	},
	mounted() {
		this.init();
	},
	methods: {
		async init() {
			const params = {
				pageSize: 9999,
				current: 1,
				status: null,
			};
			let res = await getSpecificationList(params);
			if (res.code !== 200) return;
			this.options = res.data.data.data;
		},
		specificationListChange(val) {
			//检查是否重复
			if (!this.specificationList.find((item) => item.id === val)) {
				const specificationItem = this.options.find((item) => item.id === val);
				//检查是否重复
				const isRepeat = this.specificationList.find((item) => item.name === specificationItem.name);
				if (isRepeat) {
					ElMessage.warning('该规格已存在！');
				} else {
					if (this.specificationList.length === 0) {
						this.specificationList.push(specificationItem);
						this.emitData();
					} else {
						ElMessageBox.confirm(`将清空规格设置中的数据，是否继续？`, 'Warning', {
							confirmButtonText: '确认删除',
							cancelButtonText: '取消',
							type: 'warning',
							title: '重要提醒',
						})
							.then(async () => {
								this.specificationList.push(specificationItem);
								this.emitData();
							})
							.catch(() => {});
					}
				}
			} else {
				this.$message.warning('该规格已存在！');
			}
			this.selected = '';
		},
		delItem(index) {
			ElMessageBox.confirm(`将删除连带数据[包括：规格明细与规格设置中的数据]，是否继续删除？`, 'Warning', {
				confirmButtonText: '确认删除',
				cancelButtonText: '取消',
				type: 'warning',
				title: '重要提醒',
			})
				.then(async () => {
					this.specificationList.splice(index, 1);
					this.emitData();
				})
				.catch(() => {});
		},
		saveCustom() {
			if (isEmpty(this.customValue)) return ElMessage.warning('规格不能为空！');
			//检查是否重复
			const isRepeat = this.specificationList.find((item) => item.name === this.customValue);
			if (isRepeat) return ElMessage.warning('该规格已存在！');
			if (this.specificationList.length === 0) {
				this.specificationList.push({
					name: this.customValue,
				});
				this.emitData();
				this.customValue = '';
			} else {
				ElMessageBox.confirm(`将清空规格设置中的数据，是否继续？`, 'Warning', {
					confirmButtonText: '确认删除',
					cancelButtonText: '取消',
					type: 'warning',
					title: '重要提醒',
				})
					.then(async () => {
						this.specificationList.push({
							name: this.customValue,
						});
						this.emitData();
						this.customValue = '';
					})
					.catch(() => {});
			}
		},
		emitData() {
			this.$emit('update:modelValue', this.specificationList);
			this.$emit('changeList', this.specificationList);
		},
	},
};
</script>

<template>
	<div class="SelectSpecification">
		<div style="margin-bottom: 10px">
			<el-button plain type="primary" @click="isShowCustomInput = !isShowCustomInput">{{ btnText }}</el-button>
		</div>
		<el-select
			v-if="!isShowCustomInput"
			v-model="selected"
			@change="specificationListChange"
			placeholder="Choose tags for your article"
			style="margin-bottom: 10px"
		>
			<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
		</el-select>
		<div v-else style="margin: 10px 0">
			<el-row :gutter="20">
				<el-col :span="8">
					<el-input show-word-limit maxlength="200" v-model="customValue" placeholder="Please input" />
				</el-col>
				<el-col :span="8">
					<el-button type="primary" @click="saveCustom">添加至列表</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="tag_list">
			<template v-for="(item, index) in specificationList" :key="index">
				<el-tag @close="delItem(index)" closable type="success">
					{{ item.name }}
				</el-tag>
			</template>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.SelectSpecification {
	margin-bottom: 10px;
	.el-tag + .el-tag {
		margin-left: 10px;
	}
}
</style>
